<template>
  <view class="center-page">
    <view class="bg">
      <u-navbar :is-back="false" title="我的" title-color="#fff" :border-bottom="false" :background="background">
        <view slot="right" class="slot-wrap">
          <view class="icon-wrap" @click="toSetting">
            <u-icon name="setting" size="40"></u-icon>
          </view>
          <view class="icon-wrap">
            <u-icon name="chat" size="40"></u-icon>
          </view>
        </view>
      </u-navbar>
      <login-info @setting="toSetting"></login-info>
    </view>
    <view class="u-p-20">
      <!-- 我的订单 -->
      <order-card></order-card>
      <view class="cell-list">
        <u-cell-item icon="clock-fill" title="浏览历史" :border-bottom="historyList.length === 0" :icon-style="{color: '#20DADF'}" :arrow="false">
          <view slot="right-icon" class="">
            <u-icon name="trash" size="36" color="#999"></u-icon>
          </view>
        </u-cell-item>
        <browse-history v-if="historyList.length > 0" :list="historyList"></browse-history>
        <u-cell-item icon="rmb-circle-fill" title="我的钱包" :icon-style="{color: '#FF4D00'}" :arrow="true"></u-cell-item>
        <u-cell-item icon="map-fill" title="地址管理" :icon-style="{color: '#20DADF'}" :arrow="true"></u-cell-item>
        <u-cell-item icon="star-fill" title="我的收藏" :icon-style="{color: '#2049CB'}" :arrow="true"></u-cell-item>
        <u-cell-item icon="chat-fill" title="意见反馈" :icon-style="{color: '#FF6940'}" :arrow="true"></u-cell-item>
        <u-cell-item icon="setting-fill" title="个人设置" :icon-style="{color: '#2B9BF2'}" :arrow="true"></u-cell-item>
      </view>
    </view>
  </view>
</template>

<script>
  import LoginInfo from '@/components/center/login-info.vue'
  import OrderCard from '@/components/center/order-card.vue'
  import BrowseHistory from '@/components/center/browse-history.vue'
  export default {
    components: { LoginInfo, OrderCard, BrowseHistory },
    data() {
      return {
        background: {
          background: 'transparent'
          // backgroundImage: ''
        },
        historyList: []
      }
    },
    onReady() {
      // this.getHistoryGoods()
    },
    methods: {
      getHistoryGoods () {
        this.historyList = [
          {
            id: 1,
            img: 'https://m.360buyimg.com/ceco/jfs/t1/118009/23/13732/163138/5f27686eE27e852f9/1708057f799a2f92.jpg!q70.jpg'
          },
          {
            id: 2,
            img: 'https://m.360buyimg.com/ceco/jfs/t1/118009/23/13732/163138/5f27686eE27e852f9/1708057f799a2f92.jpg!q70.jpg'
          },
          {
            id: 3,
            img: 'https://m.360buyimg.com/ceco/jfs/t1/118009/23/13732/163138/5f27686eE27e852f9/1708057f799a2f92.jpg!q70.jpg'
          }
        ]
      },
			toSetting () {
				uni.navigateTo({
					url: '/pages/center/setting'
				})
			}
    }
  }
</script>

<style lang="scss" scoped>
  .center-page {
    .bg {
      background: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63));
      .slot-wrap {
        display: flex;
        background: transparent;
        .icon-wrap {
          padding-right: 30rpx;
          color: #FFFFFF;
        }
      }
    }
    .cell-list {
      margin-top: 20rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
    }
  }
</style>
